@keyframes animX {

  /* 动画的起始状态，初始位置。 */
  0% {
    left: 0px;
  }

  /* 动画的结束状态，元素向右移动到父元素宽度的60%处。 */
  100% {
    left: 60%;
  }
}

@keyframes animY {

  /* 动画的起始状态，初始位置。 */
  0% {
    top: 0px;
  }

  /* 动画的结束状态，元素向下移动到距离顶部250像素的位置。 */
  100% {
    top: 250px;
  }
}

@keyframes scale {

  /* 初始状态，缩放0.6倍 */
  0% {
    transform: scale(0.6);
    z-index: 0;
  }

  /* 在动画的一半处，元素放大到1倍 */
  50% {
    transform: scale(1);
    z-index: 3;
  }

  /* 动画结束时，恢复原始大小的0.5倍 */
  100% {
    transform: scale(0.5);
    z-index: 0;
  }
}

.container {
  position: relative;
  top: 387px;
  left: 231px;
  transform: rotateX(20deg);
}

.ball {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 230px;
  height: 155px;
  /*background-color: #f00;*/
  position: absolute;
  font-size: 22px;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  line-height: 120px;
  /*动画执行一次所需时间*/
  animation-duration: 10s, 10s, 20s;
  /*动画以何种运行轨迹完成一个周期  cubic-bezier函数来指定贝塞尔曲线的运动轨迹*/
  animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
  /*动画播放次数:无线循环播放*/
  animation-iteration-count: infinite;
  /*是否轮流反向播放动画 alternate:正向播放*/
  animation-direction: alternate;
  /* 应用的关键帧动画名称 : 动画将按照指定的属性进行播放。 */
  animation-name: animX, animY, scale;
}

/* paused:动画停止 */
#stop {
  animation-play-state: paused;
}

.ball>img {
  width: 250px;
  height: 250px;
}

.ball>p {
  width: 300px;
  font-size: 25px;
  text-align: center;
  color: #fff;
}

.ball>.title {
  color: rgb(255, 211, 56);
}